This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2fe2e6c:

Colors look a bit lighter than before, I think it may be because Autocomplete was using some arbitrary alpha values before.
Is it possible to make it aligned with what we had before ?

Colors look a bit lighter than before, I think it may be because Autocomplete was using some arbitrary alpha values before.
Is it possible to make it aligned with what we had before ?

@aymeric-giraudet Now it should look more subtle. For the color, I'm using the example header gradient first stop color as the primary color, and using it to mix it with the background color. This way I only need a primary color, whereas in Autocomplete.js, a different color/alpha is used as the selected color.

background-color: color-mix(
  in srgb,
  rgb(var(--ais-primary-color-rgb)) 10%, /* I updated this value */
  rgb(var(--ais-background-color-rgb))
);

WDYT?

@aymeric-giraudet By the way, I noticed that the autocomplete item's aria-selected attribute is not updated to true on hover, it only changes when the keyboard arrows are used. Is this expected?

yes, as that's the WAI-ARIA suggestion. The mouse is only only used for clicking and the keyboard for selection.

yes, as that's the WAI-ARIA suggestion. The mouse is only only used for clicking and the keyboard for selection.

Makes sense, then I guess Autocomplete.js implem is wrong, aria-selected is updated on hover